<template>
  <!-- 机构管理 -->
  <div class="app-container">
    <div class="left">
      <el-tree
        :data="list"
        :props="defaultProps"
        accordion
        highlight-current
        default-expand-all
        node-key="id"
        @current-change="getOrganization"
      />
    </div>
    <div class="right">
      <div class="form">
        <!-- 表单 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>机构信息</span>
          </div>
          <el-form :inline="true" label-width="100px" class="menu.el-input__inner" :model="formData">
            <el-row>
              <el-form-item label="机构编号" prop="id">
                <el-input v-model="formData.id" size="medium" disabled />
              </el-form-item>
              <el-form-item label="机构名称" prop="name">
                <el-input v-model="formData.name" disabled />
              </el-form-item>
              <el-form-item label="机构类型" prop="type">
                <el-select v-model="formData.type" disabled>
                  <el-option
                    v-for="v in organizationTypeArr"
                    :key="v.value"
                    :label="v.name"
                    :value="v.value"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="机构地址" prop="organ">
                <el-select v-model="formData.province.id" placeholder="请选择省份" disabled>
                  <el-option
                    v-for="v in ProvinceData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.id"
                  />
                </el-select>
                <el-select v-model="formData.city.id" placeholder="城市" style="margin-left: 35px, width: 100px;;" disabled>
                  <el-option
                    v-for="v in cityData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.id"
                  />
                </el-select>
                <el-select v-model="formData.county.id" placeholder="县城" style="margin-left: 35px, width: 100px;;" disabled>
                  <el-option
                    v-for="v in countyData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.id"
                  />
                </el-select>
              </el-form-item></el-row>
            <el-row>
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="formData.address" disabled />
              </el-form-item>
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="formData.longitude" disabled />
              </el-form-item>
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="formData.latitude" disabled />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="机构负责人" prop="managerName">
                <el-input v-model="formData.managerName" disabled />
              </el-form-item>
              <el-form-item label="机构电话" prop="phone">
                <el-input v-model="formData.phone" disabled />
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="center">
              <el-button>编辑</el-button>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <div>
        <!-- 表格 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>员工信息</span>
          </div>
          <el-table style="width: 100%" stripe fit :data="organizationTableArr">
            <el-table-column label="序号" type="index" width="60" />
            <el-table-column label="员工编号" min-width="150" prop="userId" />
            <el-table-column label="员工姓名" min-width="100" prop="name" />
            <el-table-column label="手机号" min-width="100" prop="mobile" />
            <el-table-column
              label="所属机构"
              min-width="140"
              prop="agency.name"
            />
            <el-table-column label="系统账号" min-width="100" prop="account" />
            <el-table-column
              label="系统角色"
              min-width="100"
              prop="stationName"
            />
            <el-table-column label="账号状态" prop="status">
              <template #default="{ row }">
                <span v-if="row.status == 0">禁用</span>
                <span v-else> <i class="el-icon-s-opportunity" />正常 </span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block">
            <span class="demonstration" />
            <el-pagination
              :page-sizes="[5, 10, 20, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="+total"
              :page-size="organizationTable.pageSize"
              :current-page="organizationTable.page"
              @current-change="onPageChange"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserPageAPI, gitDistrictAPI, gitOrganizationListAPI, OrganizationAPI } from '@/api/basicData'
export default {
  data() {
    return {
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      // 表单数据--机构详情
      formData: {
        province: {
          id: '',
          name: '',
          lng: '',
          lat: '',
          mutiPoints: null
        },
        city: {
          id: '',
          name: '',
          lng: '',
          lat: '',
          mutiPoints: null
        },
        county: {
          id: '',
          name: '',
          lng: '',
          lat: '',
          mutiPoints: null
        },
        parent: null,
        // 机构编号
        id: '',
        // 机构名字
        name: '',
        // 机构类型
        type: 1,
        phone: '',
        address: '',
        latitude: '',
        longitude: '',
        parentId: '0',
        managerName: '计算机',
        extra: null,
        status: false

      },
      // 表格数据
      organizationTable: {
        page: 1,
        pageSize: 3,
        account: '',
        agencyId: '',
        name: '',
        phone: ''
      },
      // 渲染表格数据
      organizationTableArr: [],
      // 渲染省表单数据
      ProvinceData: [],
      // 城市渲染列表
      cityData: [],
      // 县城渲染列表
      countyData: [],
      total: '',
      // 机构类型渲染数组
      organizationTypeArr: [
        {
          value: 1,
          name: '一级转运'
        },
        {
          value: 2,
          name: '二级转运'
        },
        {
          value: 3,
          name: '网点'
        }
      ]
    }
  },

  created() {
    this.organList()
    this.geTorganizationTableArr()
  },
  methods: {
    // 左树列表
    async organList() {
      const res = await gitOrganizationListAPI()
      console.log('res  ----->  ', JSON.parse(res.data))
      // 获取左数列表第一个下标渲染机构详情
      this.getOrganizationID(JSON.parse(res.data)[0].id)
      this.list = JSON.parse(res.data)
    },
    // 页面器处理
    async geTorganizationTableArr() {
      const result = await getUserPageAPI(this.organizationTable)
      this.organizationTable.page = result.data.page
      this.total = result.data.counts
      this.organizationTableArr = result.data.items
    },
    // 页码变化时触发
    onPageChange(page) {
      this.organizationTable.page = page
      this.geTorganizationTableArr()
    },
    // 查询机构详情
    async getOrganization(row) {
      this.getOrganizationID(row.id)
    },
    async getOrganizationID(id) {
      const result = await OrganizationAPI(id)
      this.formData = result.data
      this.getProvince(result.data.parentId)
    },
    // 查询省
    async getProvince(id) {
      const result = await gitDistrictAPI(id)
      this.ProvinceData = result.data
      this.getCity(this.formData.province.id) // 获取市
    },
    // 查询市
    async getCity(id) {
      const result = await gitDistrictAPI(id)
      this.cityData = result.data
      this.getCounty(this.formData.city.id) // 获取县
    },
    // 获取县
    async getCounty(id) {
      const result = await gitDistrictAPI(id)
      this.countyData = result.data
    }
  }

}

</script>
<style lang="scss" scoped>
  .right{
  width: 1436px !important;
}
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }

}
.el-card.box-card.is-always-shadow{
  width: 1380px;
  margin-left: 30px;
}
::v-deep .el-card__header{
  width: 1436px !important;
  color: #2a2929;
    font-weight: 700;
    font-size: 16px;
}
::v-deep .el-card__body{
  width: 1436px !important;

    padding: 20px 0;
    width: 100%!important;
    padding-right: 37px;
}
// 输入框长度
::v-deep .form .el-input__inner{
  width: 400px;
}
  .box-card {
    width: 480px;
    margin-bottom: 80px;
  }
</style>
